import React from "react";
import { DownOutlined } from "@ant-design/icons";
import { Popover, Button } from "antd";
import { url, playlistcatlist,topplaylist } from "../../api/index";
import { axiosGet } from "../../axios";
import dealWithData from '../../utils/get-common-type'
import {inject,observer} from 'mobx-react'

@inject('songlist')@observer
class SongListTypes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      types: "",
      hotTags:'全部歌单'
    };
  }

  componentDidMount() {
    this.getListType();
  }
  //  获取歌单所有分类
  getListType() {
    axiosGet(url, playlistcatlist).then((data) => {
      let result = [];
      result = dealWithData(data.sub, "category");
      for (let i in result) {
        result[i]["category"] = data.categories[result[i]["attribute"]];
      }
      this.setState({
        types: result,
      });
    });
  }
    //  重新设置tag获取
    setTag(e){
      let val
      if(e.target.children[0] === []){
      }else{
        val = e.target.innerText
      }
      window.scrollTo(0, 0);
      this.setState({
        hotTags:val
      })
      this.props.songlist.setTag(val) 
      axiosGet(url, topplaylist,"limit=200",'cat='+val).then((data) => {
        this.props.songlist.setSonglist(data.playlists)
      });
    }
  //  渲染
  render() {
    let types = this.state.types;
    const typeContent = (
      <div className='type-main'>
        <Button className="all-btn" onClick={(e)=>{this.setTag(e)}}>全部歌单</Button>
        {types &&
          types.map((item,index) => {
            return (
              <div key={index} className='type-main-item'>
                <div className='title'>{item.category}</div>
                <div className='btn-main'>
                  {
                    types[index]["allData"].map((items, indexs) => {
                      return (
                        <Button key={indexs} className="btn" onClick={(e)=>{this.setTag(e)}}>
                          {items.name}
                        </Button>
                      );
                    })}
                </div>
              </div>
            );
          })}
        
      </div>
    );
    return (
      <div className="list">
        <div className="type">
          <Popover
            placement="bottomLeft"
            content={typeContent}
            title='全部分类歌单'
            trigger="hover"
          >
            <Button>
              {this.state.hotTags}
              <DownOutlined />
            </Button>
          </Popover>
        </div>
      </div>
    );
  }
}

export default SongListTypes